<template>
	<div class="page">
		<Head navTitle="充值" />
		<div class="page-container ">
			<div class="bs-panel ht-panel rewt-panel">
				<div class="bs-panel-body">
					<div class="bs-form">
						<el-form ref="form" :model="form" label-position="top">
							<el-form-item label="请选择银行卡">
								<el-select v-model="form.bankCard" placeholder="请选择">
									<el-option label="FengYangPay VA" value="0"></el-option>
									<el-option label="FengYangPay " value="1"></el-option>
								</el-select>
								<div class="item-link" @click="tVisible = true">
									<span>查看银行信息</span>
								</div>
							</el-form-item>
							<el-form-item label="存款银行">
								<el-select v-model="form.bank" placeholder="请选择">
									<el-option label="FengYangPay VA" value="1"></el-option>
									<el-option label="FengYangPay " value="2"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="存款时间">
								<el-date-picker v-model="form.date" type="date" placeholder="请选择存款时间"> </el-date-picker>
							</el-form-item>
							<el-form-item label="存款金额">
								<el-input v-model="form.price" placeholder="请输入存款金额"></el-input>
							</el-form-item>
							<el-form-item label="可选金额">
								<el-radio-group class="price-select" v-model="form.selprice" @change="change">
									<el-radio label="500" border>500</el-radio>
									<el-radio label="2000" border>2000</el-radio>
									<el-radio label="5000" border>5000</el-radio>
									<el-radio label="10000" border>10000</el-radio>
									<el-radio label="50000" border>50000</el-radio>
									<el-radio label="100000" border>100000</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item>
								<div class="re-end">充值前请务必阅读 <span class="re-link" @click="dialogVisible = true">《充值规则》</span></div>
							</el-form-item>
							<div class="el-form_ft text-center">
								<el-button type="success" @click="onSubmit">确定</el-button>
								<el-button type="info">取消</el-button>
							</div>
						</el-form>
					</div>
				</div>
			</div>
		</div>
		<!-- 弹出 -->
		<el-dialog title="银行信息" custom-class="bs-dialog bs-ms-dialog" :visible.sync="tVisible" width="620px">
				<el-form ref="infoform" :model="infoform" label-position="top">
					<el-form-item label="开户地">
						<el-input readonly type="textarea" autosize placeholder="请输入内容" v-model="infoform.dizhi"></el-input>
						<div class="copy-link" :data-clipboard-text="infoform.dizhi" @click="copy">复制</div>
					</el-form-item>
					<el-form-item label="银行名称">
						<el-input readonly type="textarea" autosize placeholder="请输入内容" v-model="infoform.bankname">
						</el-input>
						<div class="copy-link" :data-clipboard-text="infoform.bankname" @click="copy">复制</div>
					</el-form-item>
					<el-form-item label="卡号">
						<el-input readonly v-model="infoform.knumbar" placeholder="请输入存款金额"></el-input>
						<div class="copy-link" :data-clipboard-text="infoform.knumbar" @click="copy">复制</div>
					</el-form-item>
					<el-form-item label="名字">
						<el-input readonly v-model="infoform.name" placeholder="请输入存款金额"></el-input>
						<div class="copy-link" :data-clipboard-text="infoform.name" @click="copy">复制</div>
					</el-form-item>
				</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="info" @click="tVisible = false">取消</el-button>
				<el-button type="success" @click="tVisible = false">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog custom-class="bs-dialog bs-rule-dialog" title="充值规则" :visible.sync="dialogVisible" width="620px" :before-close="handleClose">
			<div class="art-body ">
				<p>为了让您每一天都能尽情享受AFC娱乐提供的最佳服务与体验。</p>
				<p>AFC提醒您：在使用AFC提供的服务前，请您务必仔细阅读并透彻理解本服务条款。如果您不接受以下服务条款，请您切勿在AFC进行注册或游戏。</p>
				<p>如果您使用AFC提供的服务，您的使用行为将被视为对本服务条款全部内容的认可。</p>
				<p>定义：
				（一）：以下条规适用于用户使用、连接和参与不时由AFC(统称 " AFC"、"我们" 及 "我们的", 视具体情况而定) 通过经营的其他网站 ("游戏网站") 提供的网上 "玩真钱" 模式的游戏服务 ("游戏服务")。本条规须与特定游戏的游戏规则 (统称 "游戏规则") 及适用于游戏服务和游戏软件的使用及与连接进入游戏网站和其中所含游戏信息的其他条规 (统称 "本条规") 一并阅读。<br>
				（二）："游戏" 就本条规而言, 包括但不限于通过游戏网站提供的任何游戏服务进行的投注、游戏及各类游戏活动; "连接设备" 指任何应用连接设备, 包括但不限于为使用和连接游戏网站、参与游戏服务而采用的个人电脑、笔记本电脑、移动电话、个人数码助理、PDA电话、手提设备。"游戏软件" 指经监管机关批准的、安装在用户连接设备上的电脑程序、数据文件或任何其他资讯及信息内容 (包括与之有关的任何用户信息), 以便用户通过用户连接设备使用、连接和参与在游戏网站上提供的游戏服务; "体育游戏" 指游戏网站下 "体育游戏" 链接或标题项下接入或提供的互联网游戏系统, 及所有与其相关的服务和网上游戏活动。</p>
				<p>同意：<br>
				（三）：用户在注册过程中已阅读"相关条款和隐私政策", 勾选相关按钮点击注册后即表示用户确认并同意本条规及本条规构成用户与AFC之间关于游戏服务使用的具有法律约束力的协议 ("使用协议")。</p>

			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="success" @click="dialogVisible = false">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import Clipboard from 'clipboard'
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {
				dialogVisible:false,
				tVisible:false,
				form: {
					bankCard: '',
					bank: '',
					date: '',
					price: '',
					selprice: '',
				},
				infoform: {
					dizhi: '这是开户地名称，可以两行展示',
					bankname: '这是开户地名称，可以两行展示',
					knumbar: '这是卡号',
					name: '这是名字',
				}
			};
		},
		methods: {
			change(e) {
				this.form.price = e
			},
			copy() {
				var clipboard = new Clipboard('.copy-link')
				clipboard.on('success', e => {
					console.log(e)
					this.$message({
						message: '复制成功',
						center: true,
						type: 'success',
						duration: 800
					});
					clipboard.destroy()

				})
				clipboard.on('error', e => {
					// 不支持复制
					console.log(e)
					clipboard.destroy()
					// 释放内存
				})
			}
		}
	}
</script>
